<!doctype html>
<html>

<head>
    <title>Line Chart with Custom Tooltips</title>
    <script src="../Chart.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
    #canvas-holder1 {
        width: 300px;
        margin: 20px auto;
    }
    
    #canvas-holder2 {
        width: 50%;
        margin: 20px 25%;
    }
    
    #chartjs-tooltip {
        opacity: 1;
        position: absolute;
        background: rgba(0, 0, 0, .7);
        color: white;
        border-radius: 3px;
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        pointer-events: none;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
    
    .chartjs-tooltip-key {
        display: inline-block;
        width: 10px;
        height: 10px;
    }
    </style>
</head>

<body>
    <div id="canvas-holder1">
        <canvas id="chart1" width="300" height="30" />
    </div>
    <script>
    Chart.defaults.global.pointHitDetectionRadius = 1;
    var customTooltips = function(tooltip) {

        console.log(tooltip._view);

        // Tooltip Element
        var tooltipEl = $('#chartjs-tooltip');

        if (!tooltipEl[0]) {
            $('body').append('<div id="chartjs-tooltip"></div>');
            tooltipEl = $('#chartjs-tooltip');
        }

        // Hide if no tooltip
        if (!tooltip._view.opacity) {
            tooltipEl.css({
                opacity: 0
            });
            $('.chartjs-wrap canvas')
                .each(function(index, el) {
                    $(el).css('cursor', 'default');
                });
            return;
        }

        $(tooltip._chart.canvas).css('cursor', 'pointer');

        // Set caret Position
        tooltipEl.removeClass('above below no-transform');
        if (tooltip._view.yAlign) {
            tooltipEl.addClass(tooltip._view.yAlign);
        } else {
            tooltipEl.addClass('no-transform');
        }

        // Set Text
        if (tooltip._view.text) {
            tooltipEl.html(tooltip._view.text);
        } else if (tooltip._view.labels) {
            var innerHtml = '<div class="title">' + tooltip._view.title + '</div>';
            for (var i = 0; i < tooltip._view.labels.length; i++) {
                innerHtml += [
                    '<div class="section">',
                    '   <span class="key" style="background-color:' + tooltip._view.legendColors[i].fill + '"></span>',
                    '   <span class="value">' + tooltip._view.labels[i] + '</span>',
                    '</div>'
                ].join('');
            }
            tooltipEl.html(innerHtml);
        }

        // Find Y Location on page
        var top = 0;
        if (tooltip._view.yAlign) {
            if (tooltip._view.yAlign == 'above') {
                top = tooltip._view.y - tooltip._view.caretHeight - tooltip._view.caretPadding;
            } else {
                top = tooltip._view.y + tooltip._view.caretHeight + tooltip._view.caretPadding;
            }
        }

        var offset = $(tooltip._chart.canvas).offset();

        // Display, position, and set styles for font
        tooltipEl.css({
            opacity: 1,
            width: tooltip._view.width ? (tooltip._view.width + 'px') : 'auto',
            left: offset.left + tooltip._view.x + 'px',
            top: offset.top + top + 'px',
            fontFamily: tooltip._view._fontFamily,
            fontSize: tooltip._view.fontSize,
            fontStyle: tooltip._view._fontStyle,
            padding: tooltip._view.yPadding + 'px ' + tooltip._view.xPadding + 'px',
        });
    };
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };
    var lineChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }, {
            label: "My Second dataset",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }]
    };

    window.onload = function() {
        var chartEl = document.getElementById("chart1");
        window.myLine = new Chart(chartEl, {
            type: 'line',
            data: lineChartData,
            options: {
                tooltips: {
                    enabled: false,
                    custom: customTooltips
                }
            }
        });
    };
    </script>
</body>

</html>
